<template>
  <div class="test-a">
    <!-- 横向框 -->
    <div class="test-height">
      <el-row>
        <el-col :span="12">
          <!-- 内部框 -->
          <div class="col-div table">
            <div class="table-header">
              <p class="th-font"><b>待办工作</b></p>
            </div>
            <el-table
              :data="tableData"
              border
              class="lefttop_table"
              height="357"
            >
              <el-table-column prop="date" label="日期" width="100">
              </el-table-column>
              <el-table-column prop="department" label="部门" width="80">
              </el-table-column>
              <el-table-column prop="todo" label="待办事项"> </el-table-column>
              <el-table-column prop="by_time" label="截止时间" width="100">
              </el-table-column>
              <el-table-column prop="head" label="负责人" width="80">
              </el-table-column>
            </el-table>
          </div>
        </el-col>

        <el-col :span="12">
          <!-- 内部框 -->
          <div class="col-div">
            <OneTwo></OneTwo>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="test-height">
      <div class="item-div" v-if="itema.a1"><h4 @click="ban(1)">1111</h4></div>
      <div class="item-div" v-if="itema.a2"><h4 @click="ban(2)">2</h4></div>
      <div class="item-div" v-if="itema.a3"><h4 @click="ban(3)">3</h4></div>
      <div class="item-div" v-if="itema.a4"><h4 @click="ban(4)">4</h4></div>
      <div class="item-div" v-if="itema.a5"><h4 @click="ban(5)">5</h4></div>
      <div class="item-div" v-if="itema.a6"><h4 @click="ban(6)">6</h4></div>
    </div>

    <!-- 横向框 2 -->
    <div class="test-height">
      <el-row>
        <!-- 第一个框go -->
        <el-col :span="12">
          <!-- 内部框 -->
          <div class="col-div">
            <TwoOne></TwoOne>
          </div>
        </el-col>
        <!-- 第一个框end -->

        <!-- 第二个框go -->
        <el-col :span="12">
          <!-- 内部框 -->
          <div class="col-div">
            <TwoTwo></TwoTwo>
          </div>
        </el-col>
        <!-- 第二个框end -->
      </el-row>
    </div>

    <!-- 横向框 3 -->
    <div class="test-height">
      <el-row>
        <el-col :span="12">
          <!-- 内部框 -->
          <div class="col-div">
            <ThereOne></ThereOne>
          </div>
        </el-col>

        <el-col :span="12">
          <!-- 内部框 -->
          <div class="col-div">
            <ThereTwo></ThereTwo>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="height:170px;"></div>
  </div>
</template>

<script>

import OneTwo from "../components/test-echarts/OneTwo.vue";
import TwoOne from "../components/test-echarts/TwoOne.vue";
import TwoTwo from "../components/test-echarts/TwoTwo.vue";
import ThereOne from "../components/test-echarts/ThereOne.vue";
import ThereTwo from "../components/test-echarts/ThereTwo.vue";
export default {
  data() {
    return {
      name: "cw-onetwo",
      itema: {
        a1: true,
        a2: true,
        a3: true,
        a4: true,
        a5: true,
        a6: true
      }
    };
  },
  components: {
    OneTwo,
    TwoOne,
    TwoTwo,
    ThereOne,
    ThereTwo
  },
  methods: {
    ban(t) {
      this.itema[`a${t}`] = false;
    }
  }
};
</script>
